<!--
 * @Author: huangtianyang 916072572@qq.com
 * @Date: 2023-11-10 10:38:08
 * @LastEditors: error: error: git config user.name & please set dead value or install git && error: git config user.email & please set dead value or install git & please set dead value or install git
 * @LastEditTime: 2024-05-24 09:56:47
 * @FilePath: \cxl-driving-training\src\views\login\Index.vue
-->
<template>
    <div class="login-box">
        <div class="login-bg">
            <div></div>
            <div></div>
        </div>
        <div class="bg"></div>
        <div class="logo"><img src="@/assets/images/dly_logo.png" alt="" /></div>
        <div class="login">
            <h1>欢迎访问数字营销平台</h1>
            <el-form ref="ruleFormRef" :model="data.account" :rules="data.rules">
                <el-form-item label="" prop="name">
                    <el-input
                        v-model="data.account.name"
                        clearable
                        placeholder="请输入账号"
                        class="input-style"
                        @keyup.enter="data.submitForm(ruleFormRef)"
                    >
                        <template #prefix>
                            <div class="icon">
                                <img src="@/assets/images/dly_zhanghao.png" alt="" />
                            </div>
                        </template>
                    </el-input>
                </el-form-item>
                <el-form-item label="" prop="password">
                    <el-input
                        type="password"
                        v-model="data.account.password"
                        clearable
                        placeholder="请输入密码"
                        class="input-style"
                        @keyup.enter="data.submitForm(ruleFormRef)"
                    >
                        <template #prefix>
                            <div class="icon">
                                <img src="@/assets/images/dly_mima.png" alt="" />
                            </div>
                        </template>
                    </el-input>
                </el-form-item>
            </el-form>
            <!-- <div class="rememberPassword">
                <el-checkbox v-model="data.rememberPassword">记住登录</el-checkbox>
            </div> -->
            <div class="login-btn" @click="data.submitForm(ruleFormRef)">登录</div>
        </div>
    </div>
</template>
<script setup lang="ts">
import { reactive, ref } from 'vue'
import Login from '.'
const ruleFormRef = ref()
const data = reactive(new Login())
</script>

<style lang="scss">
.el-form-item {
    margin-bottom: 32px;
}
.el-input__wrapper {
    background-color: #f3f4fa;
}
.login-box {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fff;

    position: relative;

    .login-bg {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        div {
            height: 50%;
            &:nth-of-type(1) {
                background: linear-gradient(70deg, #fd5845 0%, #fe7251 100%);
            }
            &:nth-of-type(2) {
                background: #fff;
            }
        }
    }

    .bg {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        background-image: url(@/assets/images/dlt_beijingtu.png);
        background-position: center center;
        background-repeat: no-repeat;
        background-size: 100% auto;
    }

    .logo {
        width: 352px;
        height: 40px;
        position: absolute;
        top: 30px;
        left: 76px;
    }

    .login {
        position: absolute;
        width: 456px;
        height: auto;
        top: 50%;
        right: 10%;
        transform: translate(0, -50%);
        text-align: center;
        background-color: #fff;
        border-radius: 16px;
        box-sizing: border-box;
        box-shadow: 0 0 10px #88888844;
        padding: 56px 33px;

        .icon {
            padding-right: 16px;
            padding-left: 6px;
            border-right: 1px solid #ccc;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        h1 {
            font-weight: 400;
            font-size: 20px;
            color: #666;
            margin-bottom: 48px;
        }
        .input-style {
            width: 390px;
            height: 56px;
            background-color: #f3f4fa;
        }
        .rememberPassword {
            display: flex;
            align-items: center;
            justify-content: flex-start;
        }
        .login-btn {
            margin-top: 32px;
            width: 390px;
            height: 56px;
            background: #fd654d;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 16px;
            color: #fff;
            cursor: pointer;
        }
    }
}
</style>
